<template>
  <div class="app-container">
    <div class="box-server">
      <el-row class="box-elrow"
              :gutter="64">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-input v-model="parmas.searchWord"
                      placeholder="用户ID/昵称/手机号" @keyup.enter.native="handleFilter"></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="sousuo()">搜索</el-button>
            <el-button type="danger"
                       @click="deleteuser">批量删除</el-button>
            <el-button type="primary"
                       @click="administrators">新增管理员</el-button>
          </div>
        </el-col>
      </el-row>

      <div class="box-data">
        <el-table ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  border
                  center
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection">
          </el-table-column>
          <el-table-column fixed
                           prop="phone"
                           label="账号">
          </el-table-column>
          <el-table-column prop="username"
                           label="昵称">
          </el-table-column>
          <el-table-column prop="sex"
           :show-overflow-tooltip="true"
                           label="性别" :formatter="statusFormtter">
          </el-table-column>
          <el-table-column prop="created_at"
                           label="创建时间"> 
          </el-table-column>

        </el-table>
      </div>
      <div class="box-page">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="parmas.page"
                       :page-sizes="[3,5,10,15]"
                       :page-size="parmas.pageNum"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="parmas.total">
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="Administratoradd[dialogStatus]"
               :visible.sync="dialogFormVisible">
      <el-form ref="dataForm"
               :rules="rules"
               :model="Administratoradd"
               label-position="left"
               label-width="70px"
               style="width:80%; margin-left:50px;">
        <el-form-item label="名称"
                      prop="username">
          <el-input v-model="Administratoradd.username" />
        </el-form-item>
        <el-form-item label="手机号"
                      prop="phone">
          <el-input v-model="Administratoradd.phone" />
        </el-form-item>
        <el-form-item label="密码"
                      prop="password">
          <el-input v-model="Administratoradd.password" />
        </el-form-item>
        <el-form-item label="性别"
                      prop="sex">
          <el-select v-model="Administratoradd.sex"
                     placeholder="请选择活动区域">
            <el-option label="男"
                       value="1"></el-option>
            <el-option label="女"
                       value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary"
                   @click="addlist()">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {adminList,adminAdd,adminDel}  from "@/api/user";
export default {

  data() {
    return {
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published',
        cellphone: "",
        region: "",
        official: "",
        password: "",
        value1: "",
        value: ""
      },
      beijing: "",
      shanghai: "",
      shi: "",
      fou: "",
      value1: "",
      value: "",
      options: [{
        value: '1',
        label: '是否认证'
      }, {
        value: '2',
        label: '已认证'
      }, {
        value: '3',
        label: '认证中'
      }],
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        username: [{ required: true, message: '请输入名字', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        sex	: [{ required: true, message: '请选择性别', trigger: 'blur' }],
      },
      dialogStatus: "",
      input: "",
      dialogFormVisible: false,
      tableData: [],
      multipleSelection: [],
      parmas:{
        searchWord:"",
        page:"",
        pageNum:"",
        total:"",
      },
      Administratoradd:{
        username:"",
        phone:"",
        sex:"",
        password:""
      },
      indss:[],
      total:"",
    }

  },
  created(){
    this.list();
  },
  methods: {
     handleFilter(){
      this.parmas.page=1;
      this.list();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {

      this.multipleSelection = val;
      this.indss=[];
      console.log(this.multipleSelection);
      this.multipleSelection.map((item)=>{
        console.log(item);
        this.indss.push(item.id);
      });
    },
    deleteuser() {
      this.$confirm("确认要删除吗?", "提示", {
        confirmButtonText: "确认",
        concelButtonText: "取消",
        type: "warning"
      }).then(async() => {
       await adminDel({ids:JSON.stringify(this.indss)});
       this.list();
       this.$message({
          type: "success",
          message: "删除成功"
        });
      }).catch(() => {
        console.log("erer")
      })
    },
     handleSizeChange(val) {
      this.parmas.pageNum=val;
      this.list();
    },
    handleCurrentChange(val) {
      this.parmas.page=val;
    },
    administrators() {
      this.dialogFormVisible = true;
    },
    list(){
      adminList(this.parmas).then((response)=>{
        console.log(response);
        this.tableData=response.data;
        this.total=response.total;
        this.parmas.page=response.page;
        this.parmas.pageNum=response.pagesize;
        this.parmas.total=response.total;
      })
    },
   
    statusFormtter(row,column){
      console.log(row);
      const user_type=row.sex;
      const auth_status=row.auth_status;
      console.log(user_type);
      if(user_type==1){
       return "男"
      }else if(user_type==2){
        return "女"
      }
    },  
    addlist(){  
        this.$refs["dataForm"].validate(valid => {
        if (valid) {
          adminAdd(this.Administratoradd)
            .then(response => {
              this.$message({
                type: "success",
                message: "新增成功"
              });
               this.dialogFormVisible=false;
               this.list();
            })
        }
      });
    },
    sousuo(){
      this.list();
      this.page=1;
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
}
.box-server {
  height: 100%;
  background-color: #ffff;
  margin: 20px 20px 20px 20px;
  .box-elrow {
    padding: 16px 16px 16px 16px;
  }
  .Exhibition {
    height: 50px;
    margin: 10px 16px 0px;
    display: flex;
    background-color: #f2f2f2;
    .exhibitionleft {
      width: 8px;
      background-color: #009688;
    }
    .exhibitionright {
      display: flex;
      // justify-content: space-between;
      align-content: center;
      .box-item {
        background-color: #3ebfea;
        padding: 8px 12px 8px 12px;
        border-radius: 5px;
        margin-right: 5px;
      }
    }
  }
  .exhtitle {
    display: flex;
    align-items: center;
  }
  .box-data {
    padding: 16px 16px 16px 16px;
  }
}
.pr {
  padding-top: 12px;
}
.box-page {
  display: flex;
  justify-content: flex-end;
}
</style>
